<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件Event</title>
    <style>
        #onclick{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }

        #mouse_to{
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
</head>
<body>
    <!-- <div id="onclick" onclick='clicks()'></div> -->
    <div id="onclick"></div>
    <div id="mouse_to"></div>
    <form action="">
        <p class="user1">
            <label for="username">ueseName</label>
            <input type="text" name="user" id="focus_user">
        </p>
        <p>
            <label for="password">password</label>
            <input type="password" name="pwd" id="focus_pwd">
        </p>
        <input type="submit">
    </form>

    <textarea name="" id="text" cols="30" rows="10">本内容严谨复制</textarea><br>
    <input type="text" value="fyr" id="change">内容被改变事件。<br>
    <input type="text" name="" id="change_time" value="这千万不能改了">内容实时改变事件。






    <script>
        // 点击触发事件 1、获取标签，绑定事件(用的多) 2、直接在标签内绑定
        // var oc = document.getElementById('onclick')
        // var isBlue = true;
        // oc.onclick = function(){
        //     // alert('触发弹出事件')
        //     // this // 指代当前获取的标签 
        //     if(isBlue){
        //         this.style.backgroundColor = 'tomato'
        //         isBlue = false
        //     }else{
        //         this.style.backgroundColor = 'skyblue'
        //         isBlue = true
        //     }
        // }

        //鼠标悬浮事件
            var oc = document.getElementById('mouse_to');
            oc.onmouseover = function(){
                this.style.backgroundColor = 'skyblue';
            }
            oc.onmouseleave = function(){
                this.style.backgroundColor = 'black';
            }
        // 文本框光标聚焦与失焦事件
            var of = document.getElementById('focus_user');
            var new_span1 = document.createElement('span');

            of.onfocus = function(){
                of.parentNode.appendChild(new_span1)
                new_span1.innerHTML = '看你🐎，快填！'
                this.style.backgroundColor = 'skyblue';
            }
            of.onblur = function(){
                this.style.backgroundColor = 'white'
                of.parentNode.removeChild(new_span1)
            }
            var of1 = document.getElementById('focus_pwd');
            var new_span2 = document.createElement('span');

            of1.onfocus = function(){
                of1.parentNode.appendChild(new_span2)
                new_span2.innerHTML = '密码爷不看嗷'
                this.style.backgroundColor = 'skyblue';
            }
            of1.onblur = function(){
                this.style.backgroundColor = 'white'
                of1.parentNode.removeChild(new_span2)
            }
        
        // 文本框改变事件
            // 文本被选中事件
            var texts = document.getElementById('text')
            texts.onselect = function(){
                alert('不让复制你还复制嗷')
            }
            // 文本被改变事件，改变文本后只有按下enter才会触发绑定事件。
            var changes = document.getElementById('change')
            changes.onchange = function(){
                alert('不让改你还改，我就该设置成只读的。')
            }
            // 文本实时改变事件，会实时记录改变的数据，没输入一个字符，就会触发一次绑定事件。
            var changes1 = document.getElementById('change_time')
            changes1.oninput = function(){
                console.log('改改改，你看看这是啥？'+this.value)
            }

    </script>
</body>
</html>